<template>
  <div class="index-page">
    <van-notice-bar
      v-if="false"
      left-icon="volume-o"
      text="公告：近期在对巡店系统进行优化升级后，部分人员因APP缓存问题可能会导致巡店功能异常，建议清理缓存后再行使用，同时向上级管理员进行反馈异常！"
    />
    <logout></logout>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <!-- <div class="welcome-banner"></div> -->
        <img class="welcome-banner-img" src="~@/assets/imgs/banner.png" alt="">
      </van-swipe-item>
      <!-- <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item> -->
    </van-swipe>
    <van-grid square clickable :border="false">
      <van-grid-item :to="typePath.strorelist" >
        <img src="~@/assets/imgs/icon_mdgl.png" alt="logo">
        <div class="grid_text">门店管理</div>
      </van-grid-item>
      <van-grid-item :to="typePath.collection">
        <img src="~@/assets/imgs/icon_xxcj.png" alt="logo">
        <div class="grid_text">信息采集</div>
      </van-grid-item>
      <van-grid-item :to="typePath.storebuild">
        <img src="~@/assets/imgs/icon_qdjs.png" alt="logo">
        <div class="grid_text">渠道建设</div>
      </van-grid-item>
      <van-grid-item :to="typePath.community">
        <img src="~@/assets/imgs/icon_rwgl.png" alt="logo">
        <div class="grid_text">店包区</div>
      </van-grid-item>
      <van-grid-item :to="typePath.counter">
        <img src="~@/assets/imgs/icon_wnjsq.png" alt="logo">
        <div class="grid_text">万能计算器</div>
      </van-grid-item>
      <van-grid-item :to="typePath.ysdz">
        <img src="~@/assets/imgs/icon_ysdzqy.png" alt="logo">
        <div class="grid_text">以收定支签约</div>
      </van-grid-item>
      <van-grid-item :to="typePath.meeting">
        <img src="~@/assets/imgs/icon_hyjlsc.png" alt="logo">
        <div class="grid_text">会议记录管理</div>
      </van-grid-item>
      <van-grid-item :to="typePath.xdxt">
        <img src="~@/assets/imgs/icon_xdxt.png" alt="logo">
        <div class="grid_text">巡店系统</div>
      </van-grid-item>
    </van-grid>

    <div class="channel_block">
      <div class="channel_header">
        <span class="header_title">渠道视图</span>
        <span class="hello-message">
          <span class="username">{{username}}</span> 您好，当前您的数据查看权限为 <span class="dataPermission">{{dataPermissionName}}</span>
        </span>
      </div>
      <div class="channel_info_list">
        <div class="list-item">渠道总数量：{{ChannelCount}}</div>
        <div class="list-item">其中社会渠道：{{ChannelCountSH}}</div>
        <div class="list-item">其中自有渠道：{{ChannelCountZY}}</div>
        <div class="list-item">其中其他渠道：{{ChannelCountQT}}</div>
        <div class="list-item">在建渠道：{{ChannelBuildCount}}</div>
        <!-- <div class="list-item">渠道退出申请：{{ChannelExitCount}}</div> -->
      </div>
    </div>

    <div class="build_title">渠道建设</div>
    <van-grid :column-num="3">
      <van-grid-item>
        <div>{{BuildPlanCount}}</div>
        <div>任务总数量</div>
      </van-grid-item>
      <van-grid-item>
        <div>{{inBuildCount}}</div>
        <div>在建中</div>
      </van-grid-item>
      <van-grid-item>
        <div>{{finishBuildCount}}</div>
        <div>已完成</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"
import Logout from '@/views/user/Logout'
import { getAction } from '@api/manage'
import { Toast } from 'vant'

export default {
  components: {
    Logout
  },
  data() {
    return {
      username: '',
      dataPermission: '',
      dataPermissionName: '',
      typePath: {
        strorelist: '/app/storeManager/StoreList',
        storebuild: '/app/construction/index',
        collection: '/app/collection/index',
        mytask: '/app/mytask/index',
        counter: '/app/brokerage/BrokerageCounter',
        ysdz: '/app/ysdz/list',
        meeting: '/app/meeting/meeting',
        xdxt: '/app/tour/list',
        community: '/app/community/list'
      },
      url: {
        taskcount: '/app/searchChannelCount',
        getDepartName: '/sys/sysDepart/getDepartName'
      },
      ChannelCount: 0,
      ChannelCountSH: 0,
      ChannelCountZY: 0,
      ChannelCountQT: 0,
      ChannelBuildCount: 0,
      ChannelExitCount: 0,
      BuildPlanCount: 0,
      inBuildCount: 0,
      finishBuildCount: 0
    };
  },
  created() {
    const userInfo = Vue.ls.get(USER_INFO)
    console.log(userInfo)
    this.userDataPermission = userInfo.dataPermission
    this.username = userInfo.realname;
    this.getTask();
    this.getDepartName()
  },
  mounted() {
  },
  methods: {
    deving() {
      Toast({ position: 'top', message: '正在开发中', duration: 500 })
    },
    getDepartName() {
      getAction(this.url.getDepartName, {
        orgCode: this.userDataPermission
      }).then((res) => {
        if (res.success) {
          const data = res.result;
          this.dataPermissionName = data.departName == '广东联通' ? '广东' : data.departName;
        }
      })
    },
    getTask() {
      const queryParam = {
        orgrank: this.userDataPermission
      }
      getAction(this.url.taskcount, queryParam).then((res) => {
        if (res.success) {
          const data = res.result[0];
          this.ChannelCount = data.ChannelCount;
          this.ChannelCountSH = data.ChannelCountSH;
          this.ChannelCountZY = data.ChannelCountZY;
          this.ChannelCountQT = data.ChannelCountQT;
          this.ChannelBuildCount = data.ChannelBuildCount;
          this.ChannelExitCount = data.ChannelExitCount;
          this.BuildPlanCount = data.BuildPlanCount;
          this.inBuildCount = data.inBuildCount;
          this.finishBuildCount = data.finishBuildCount;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.index-page {
  background: #FFF;

  .grid_text {
    margin-top: 8px;
    color: #646566;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
  }
  
  .welcome-banner {
    background: #FFF url('~@/assets/imgs/banner.png') no-repeat;
    width: 100%;
    // height: 150px;
    background-position: center;
    background-size: contain;
  }
  .welcome-banner-img {
    width: 100%;
    // height: 150px;
  }
}
.channel_block {
  padding: 10px;
  margin-bottom: 20px;
  font-size: 13px;

  .channel_header {

    .header_title {
      font-size: 16px;
      font-weight: 600;
      width: 80px;
      display: inline-block;
    }

    .hello-message {
      display: inline-block;
      margin-top: 4px;

      .username {
        color: rgb(255, 81, 0);
      }
      .dataPermission {
        color: rgb(255, 81, 0);
      }
    }
  }
  .channel_info_list {
    margin: 10px 0;
    // padding: 3px 0;
    .list-item {
      padding: 6px 5px;

      &:before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        background: red;
        margin-right: 8px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
  }
  .channel_info_list {
    background: url('~@/assets/imgs/pic.png') no-repeat;
    background-position: right;
    // background-size: contain;
    background-size: 120px;
  }
}
.build_title {
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  color: #666;
}
</style>